<template>
	<el-container>
	  <el-container>
	    <el-aside>
			<dbNav></dbNav>
		</el-aside>
	    <el-container>
	      <el-main>
			  <el-tabs v-model="activeName" @tab-remove="removeTab" type="card" :before-leave="beforeLeave">
				<el-tab-pane
				      v-for="(item, index) in editableTabs"
				      :key="item.name"
				      :label="item.title"
				      :name="item.name"
					  :closable="item.close"
				    >
					<span slot="label"><i class="el-icon-date"></i> {{item.title}}</span>
				      <component :is="item.content" :objId="item.name"></component>
				 </el-tab-pane>
				 
				<el-tab-pane key="add" name="add" >
					<span slot="label" style="padding: 8px;font-size:20px;font-weight:bold;">
						+
					</span>
				</el-tab-pane>
			</el-tabs>
		  </el-main>
	      <!-- <el-footer>Footer</el-footer> -->
	    </el-container>
	  </el-container>
	</el-container>
</template>

<script>
	import {mapGetters} from 'vuex'
	
	import dbNav from './views/nav'
	import home from  './views/home'
	import sqlsearch from  './views/sqlsearch'
	
	import stsearch from './views/stable/search'
	import stedit from './views/stable/edit'
	import stnew from './views/stable/new'
	import stChildrenTable from './views/stable/children'
	
	import tsearch from './views/table/search'
	import tedit from './views/table/edit'
	import tnew from './views/table/new'
	
	import bus from './utils/bus'
	export default {
		components: {
			dbNav,home
		},
		name:"main_home",
		data() {
		  return {
			  activeName:'obj',
			  editableTabs: [{
				title: 'TDengine 对象',
				name: 'obj',
				content: home,
				close: false
			  }]
			}
		},
		computed: {
			...mapGetters(['curObject'])
		},
		created() {
			this.init() 
		},
		beforeDestroy () {//页面销毁时需要解绑
		    bus.$off("removeTab")
			bus.$off("addTab")
		},
		mounted() {
			var that = this;
			bus.$on('removeTab', function(p) {
				that.removeTab(p)
			})
			bus.$on('addTab', function(title,name,action) {
				that.addTab(title,name,action);
			})
			bus.$on('nav', function(p) {
				that.beforeLeave('obj','')
			})
		},
		methods: {
			init(){
			},
			//添加sql查询tag
			handleAddTabs(){
				let newTabName = 'sqlSearch'+'_'+new Date().getTime();
				this.editableTabs.push({
				  title: '自定义查询',
				  name: newTabName,
				  content: sqlsearch,
				  close: true
				});
				this.activeName = newTabName; 
			},
			
			/* 活动标签切换时触发 */
			beforeLeave(currentName,oldName) {
				var self=this;
				//重点，如果name是add，则什么都不触发
				if(currentName=="add"){
					this.handleAddTabs()
					return false
				}else{
					this.activeName=currentName;
				}
			},
			removeTab(targetName){
			  let tabs = this.editableTabs
			  if (this.activeName === targetName) {
				tabs.forEach((tab, index) => {
				  if (tab.name === targetName) {
					let nextTab = tabs[index + 1] || tabs[index - 1];
					if (nextTab) {
					  this.activeName = nextTab.name;
					}
				  }
				});
			  }
			  localStorage.removeItem(targetName)
			  this.editableTabs = tabs.filter(tab => tab.name !== targetName);
			},
			addTab(title,name,action){
			 let tabs = this.editableTabs
			 let newTabName = action+'_'+name;
			 let isOpen = false
			 tabs.forEach((tab, index) => {
			   if (tab.name === newTabName) {
			 	this.activeName = newTabName; 
				isOpen = true
			   }
			 });
			 if(!isOpen){
				 this.editableTabs.push({
				   title: title,
				   name: newTabName,
				   content: action=='stsearch'?stsearch:(action=='stnew'?stnew:(action=='stedit'?stedit:(action=='tsearch'?tsearch:(action=='tnew'?tnew:(action=='tedit'?tedit:(action=='stChildrenTable')?stChildrenTable:sqlsearch))))),
				   close: true
				 });
				 this.activeName = newTabName; 
			 }
		  }
		}
	};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
